<template>
  <div class="data1" style="height: 100vh;">
    <div class="data-title">
      <div class="title-left fl"></div>
      <div class="title-center fl">实例大屏</div>
      <div class="title-right fr"></div>
    </div>
    <div class="data-content">
      <div class="con-left fl">
        <div class="left-top">
          <div class="info">
            <!-- <div class="title">最近24小时告警数</div> -->
            <!-- <div class="info-title">实时统计</div> -->
            <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
            <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
            <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
            <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
            <!-- <div class="info-main"> -->
            <!-- <dv-charts :option="option1" style="width:100%;height:80%" /> -->
            <!-- <div class="one" style="height: 100%; width: 100%;" />    -->
            <!-- </div> -->
<!--            <dv-active-ring-chart :config="config5"  style="width:100%;height:100%; " />-->
            <div id="show" class="showin"/>
          </div>
          <div class="top-bottom">
            <div class="title">活跃会话数</div>
            <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
            <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
            <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
            <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
            <!-- <div id="echarts_1" class="charts"></div> -->
            <dv-scroll-ranking-board :config="config" style="width:80%;height:80%" />
            <!-- <dv-charts :option="option2" /> -->

          </div>
        </div>
        <div class="left-bottom">
          <div class="title">日检问题总数</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <!-- <div id="echarts_2" class="charts"></div> -->
          <!-- <div class="three" style="height: 100%; width: 100%;" />  -->
          <dv-charts :option="option3" style="width:100%;height:80%" />
        </div>
      </div>
      <div class="con-center fl">
        <div class="map-num">
          <!-- <p>实时行驶车辆(辆)</p> -->
          <!-- <dv-scroll-ranking-board :config="config" style="width:500px;height:300px" /> -->
          <div class="num">
          </div>
        </div>
        <div class="cen-top" id="map">
          <div style="width:100%;height:100%" class="regional_table">
            <el-table ref="multipleTable"  :data="tableData"   tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column  type="selection"  width="55">
              </el-table-column>
              <el-table-column  prop="name" label="名称"     width="300">

              </el-table-column>
              <el-table-column  prop="healthNum" label="健康评分"  width="160">
              </el-table-column>
              <el-table-column  prop="performance"  label="性能评分" show-overflow-tooltip width="160">
              </el-table-column>
              <el-table-column  prop="loadRating"  label="负载评分" show-overflow-tooltip >
              </el-table-column>

            </el-table>
            <div style="margin-top: 20px">
              <!-- <template slot-scope="scope"> -->
              <el-button @click="saveData()" type="text" style="float: right; font-size: larger; color:#9fdcea;"  plain >保存</el-button>
              <!-- </template> -->
            </div>
            <!-- <dv-active-ring-chart :config="config5" style="width:100%;height:100%; " /> -->
          </div>

          <!-- <dv-scroll-ranking-board :config="config2" style="width:500px;height:300px" /> -->


        </div>
        <div class="cen-bottom">
          <div class="title">未处理告警</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <!-- <dv-scroll-ranking-board :config="config" style="width:80%;height:80%" /> -->
          <dv-charts :option="option2" style="width:100%;height:80%" />
        </div>
      </div>
      <div class="con-right fr">
        <div class="right-top">
          <div class="title"></div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <!-- <div id="echarts_4" class="charts"></div> -->
<!--          <dv-capsule-chart :config="config" style="width:100%;height:80%" />-->
          <div id="show1" class="showin"/>
        </div>
        <div class="right-center">
          <div class="title">内存使用率TOP5</div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
          <!-- <div id="echarts_5" class="charts"></div> -->
          <dv-conical-column-chart :config="config5" style="width:100%;height:80%;" />


        </div>
        <div class="right-bottom">
          <div class="title"></div>
          <img src="../../../public/static/img/bj-1.png" alt="" class="bj-1">
          <img src="../../../public/static/img/bj-2.png" alt="" class="bj-2">
          <img src="../../../public/static/img/bj-3.png" alt="" class="bj-3">
          <img src="../../../public/static/img/bj-4.png" alt="" class="bj-4">
<!--          <div>
            <el-progress type="circle" :percentage="value1"  :width= "80"   :height= "80" style="margin-left: 50px;margin-right: 100px;"></el-progress>
            <el-progress type="circle" :percentage="value2" :width= "80"   :height= "80" style="margin-right: 50px;"></el-progress>
            <el-progress type="circle" :percentage="value3" :width= "80"   :height= "80" style="margin-right: 60px;"></el-progress>
            <el-progress type="circle" :percentage="value4" :width= "80"   :height= "80" style="margin-right: 60px;"></el-progress>
            <el-progress type="circle" :percentage="value5" :width= "80"   :height= "80"></el-progress>
          </div>-->
          <div id="show2" class="showin"/>
          <!-- <div id="echarts_6" class="charts"></div> -->
          <!-- <dv-percent-pond :config="config6" style="width:200px;height:100px;" /> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  window._interceptConfig = {
    collection: true, //整体开关
    click: true, //页面点击事件信息采集开关
    page: true, //页面跳转加载事件信息采集开关
    error: true, //异常信息采集开关
    http: true, //通讯信息采集开关
    name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
    url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
  };
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
  // import '../../../public/static/js/jquery-2.1.1.min.js'
  // import '../../../public/static/js/echarts.min.js'
  // import '../../../public/static/js/china.js'
  // import '../../../public/static/js/echarts.js'
  import '../../../public/static/css/common.css'
  import '../../../public/static/css/map2.css'
  import { queryDataOne,updateData1,queryAlls } from "@/api/system/largeScreen"
  import * as echarts from "echarts";
  import {queryIntelligent} from "@/api/diagmanage/intelligentdiagnosis";
  export default {


    data(){
      return{
        config:{},
        config5:{},
        config3:{},
        option1:{},
        option2:{},
        option3:{},
        alarmNumOracle:0,
        alarmNumMySql:0,
        alarmNum:[],
        healthNum:[],
        memoryNum:[],
        problemNumOracle:0,
        problemNumMySql:0,
        problemNum:[],
        //1
        value1:0,
        value2:0,
        value3:0,
        value4:0,
        value5:0,
        name:[],
        tableData:[],
        ttData:[],
        //2

        intelligents:[],
        intelligents1:[],
        intelligents2:[],
        p95:[],
        p90:[],
        p80:[],
        p70:[],
        p60:[],
        h95:[],
        h90:[],
        h80:[],
        h70:[],
        h60:[],
        a95:[],
        a90:[],
        a80:[],
        a70:[],
        a60:[],

      }
    },
    created(){

    },
    mounted(){
      this.queryAllClick();
      this.getList()
    },
    methods:{
      initCharts(){
        const myChart = echarts.init(document.getElementById('show'))
        const option = {
          title: {
            text: '健康评分',
            //subtext: '业界情况分析',
            left: 'center',
            textStyle:{
              color:'white',
            },
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            bottom: 'bottom',

            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['96分到100分', '90分到95分', '80分到89分', '70分到79分', '70分以下']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
          },
          series: [
            {
              name: '健康分值',
              type: 'pie',
              data: [
                { value: this.h95.length, name: '95分到100分' },
                { value: this.h90.length, name: '90分到95分' },
                { value: this.h80.length, name: '80分到89分' },
                { value: this.h70.length, name: '70分到79分' },
                { value: this.h60.length, name: '70分以下' }
              ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ],
        }

        myChart.setOption(option)
      },
      initCharts1(){
        const myChart = echarts.init(document.getElementById('show1'))
        const option = {
          title: {
            text: '性能评分',
            //subtext: '业界情况分析',
            left: 'center',
            textStyle:{
              color:'white',
            },
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            bottom: 'bottom',

            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['96分到100分', '90分到95分', '80分到89分', '70分到79分', '70分以下']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */



          },
          series: [
            {
              name: '性能分值',
              type: 'pie',
              data: [
                { value: this.p95.length, name: '95分到100分' },
                { value: this.p90.length, name: '90分到95分' },
                { value: this.p80.length, name: '80分到89分' },
                { value: this.p70.length, name: '70分到79分' },
                { value: this.p60.length, name: '70分以下' }
              ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ],
        }

        myChart.setOption(option)
      },
      initCharts2(){
        const myChart = echarts.init(document.getElementById('show2'))
        const option = {
          title: {
            text: '负载评分',
            textStyle:{
              color:'white',
            },
            //subtext: '业界情况分析',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            /*
                显示信息的格式
                {a}:数据系列名称 对应 数据系列 name属性
                {b}:数据项名称 对应 数据系列中data属性中每个对象的name属性
                {c}:数值 对应 数据系列中data属性中每个对象的value属性
                {d}:根据数据值自动计算出的百分比
            */
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            /* 此处表示图例纵向排列 */
            orient: 'vertical',
            /* 图例显示的左侧 */
            bottom: 'bottom',

            /* 各个数据对应数据系列中data中的name属性值 */
            data: ['96分到100分', '90分到95分', '80分到89分', '70分到79分', '70分以下']
            /* 注意这里有个小功能，点击某个图例可以去除本图例的部分，并且重新计算百分比！！ */
          },
          series: [
            {
              name: '负载分值',
              type: 'pie',
              data: [
                { value: this.a95.length, name: '95分到100分' },
                { value: this.a90.length, name: '90分到95分' },
                { value: this.a80.length, name: '80分到89分' },
                { value: this.a70.length, name: '70分到79分' },
                { value: this.a60.length, name: '70分以下' }
              ],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
            }
          ],
        }

        myChart.setOption(option)
      },
      getList(){
        this.h60=[]
        this.h70=[]
        this.h80=[]
        this.h90=[]
        this.h95=[]
        this.p95=[]
        this.p90=[]
        this.p80=[]
        this.p70=[]
        this.p60=[]
        this.a95=[]
        this.a90=[]
        this.a80=[]
        this.a70=[]
        this.a60=[]



        let data = {}
        if(this.flag){
          data =this.formInline
        }

        queryIntelligent(data).then(res=>{
          this.intelligents=res.data
          // console.log(res)

          this.intelligents.forEach(e=>{

            if(e.heathSore>=95){

              this.h95.push('1')
            }else if(e.heathSore<95&&e.heathSore>=90){

              this.h90.push('1')
            }else if(e.heathSore<90&&e.heathSore>=80){
              this.h80.push('1')
            }else if(e.heathSore<80&&e.heathSore>=70){
              this.h70.push('1')
            }else if(e.heathSore<70){
              this.h60.push('1')
            }


            if(e.loadScore>=95){

              this.a95.push('1')
            }else if(e.loadScore<95&&e.loadScore>=90){

              this.a90.push('1')
            }else if(e.loadScore<90&&e.loadScore>=80){
              this.a80.push('1')
            }else if(e.loadScore<80&&e.loadScore>=70){
              this.a70.push('1')
            }else if(e.loadScore<70){
              this.a60.push('1')
            }

            if(e.performanceScore>=95){
              this.p95.push('1')
            }else if(e.performanceScore<95&&e.performanceScore>=90){
              this.p90.push('1')
            }else if(e.performanceScore<90&&e.performanceScore>=80){
              this.p80.push('1')
            }else if(e.performanceScore<80&&e.performanceScore>=70){
              this.p70.push('1')
            }else if(e.performanceScore<70){
              this.p60.push('1')
            }

          })

          this.initCharts()
          this.initCharts1()
          this.initCharts2()
          this.intelligents1 = JSON.parse(JSON.stringify(this.intelligents))
          this.intelligents2 = JSON.parse(JSON.stringify(this.intelligents))

          this.intelligents.sort((x,y)=>{
            return x.loadChange - y.loadChange
          })

          this.intelligents1.sort((x,y)=>{
            return x.heathChange - y.heathChange
          })

          this.intelligents2.sort((x,y)=>{
            return x.performanceChange - y.performanceChange
          })

        })
      },
      handleSelectionChange(selection){
        //console.log(selection)
        this.ttData=[]
        this.$nextTick(()=>{
          selection.forEach(sel=>{
            this.ttData.push(sel.name)

          })

        })

      },
      saveData(){
        this.alarmNum = []
        this.healthNum = []
        this.memoryNum = []
        this.tableData = []
        // console.log()
        updateData1(this.ttData).then(resp=>{
          this.queryAllClick();


        })
        // this.$nextTick(()=>{
        //         window.location.reload()
        //     })

      },
      queryAllClick(){
        queryAlls().then(resp=>{
          // console.log('all',resp)
          this.tableData=[]
          resp.data.forEach(element=>{

            this.tableData.push({name:element.name,healthNum:element.health_score,performance:element.performance_rating,loadRating:element.load_rating})
          })
        })
        queryDataOne().then(resp=>{
          // console.log(resp.data)

          resp.data.forEach(element => {
            if(element.type=='Oracle'){
              this.alarmNumOracle=element.alarm_num+this.alarmNumOracle
              this.problemNumOracle=element.problem_num+this.problemNumOracle
            }else if(element.type=='MySql'){
              this.alarmNumMySql=element.alarm_num+this.alarmNumMySql
              this.problemNumMySql=element.problem_num+this.problemNumMySql
            }
            this.name.push(element.name)
            this.healthNum.push({name:element.name,value:element.health_score})
            this.memoryNum.push({name:element.name,value:element.memory_rate})
            // console.log('healthNum',this.healthNum)
            // console.log(this.alarmNumOracle)

          });
          // // console.log('撒大沙发',resp.data.length)
          if(resp.data.length==0){
          }else if(resp.data.length==1){
            this.value1=resp.data[0].cpu_rate
          }else if(resp.data.length==2){
            this.value1=resp.data[0].cpu_rate
            this.value2=resp.data[1].cpu_rate
          }else if(resp.data.length==3){
            this.value1=resp.data[0].cpu_rate
            this.value2=resp.data[1].cpu_rate
            this.value3=resp.data[2].cpu_rate
          }else if(resp.data.length==4){
            this.value1=resp.data[0].cpu_rate
            this.value2=resp.data[1].cpu_rate
            this.value3=resp.data[2].cpu_rate
            this.value4=resp.data[3].cpu_rate
          }else if(resp.data.length>=5){
            this.value1=resp.data[0].cpu_rate
            this.value2=resp.data[1].cpu_rate
            this.value3=resp.data[2].cpu_rate
            this.value4=resp.data[3].cpu_rate
            this.value5=resp.data[4].cpu_rate
          }

          this.config={
            data:this.healthNum
          }

          this.config5={

            data:this.healthNum,
            digitalFlopToFixed: 2,
          }

          // this.config={...this.config}
          // this.config5={...this.config5}

          this.alarmNum.push(this.alarmNumOracle)
          this.alarmNum.push(this.alarmNumMySql)
          this.problemNum.push(this.problemNumOracle)
          this.problemNum.push(this.problemNumMySql)

          // console.log(typeof(this.alarmNumMySql),this.alarmNumMySql)
        })
        this.$nextTick(()=>{


          var list1=new Array(2)
          // console.log('list1',typeof(list1))
          list1[0]=7
          list1[1]=4
          // console.log('list1',typeof(list1))
          this.option1={
            // title: {
            //     text: '周销售额趋势'
            // },
            xAxis: {
              // name: '第一周',
              data: ['Oracle','MySql'],
              nameTextStyle:{
                fill:'#fff'
              }
            },
            yAxis: {
              // name: '销售额',
              data: 'value'
            },
            series: [
              {
                data: [14,10],
                type: 'bar',
                gradient: {
                  color: ['#37a2da', '#67e0e3']
                }
              }
            ],

          }
        })

        this.option2={
          // title: {
          //     text: '周销售额趋势'
          // },
          legend: {
            data: ['Oracle', 'MySql']
          },
          xAxis: {
            // name: '第一周',
            data: ['班组建设数据库', '民主管理系统', '职工之家数据库', '劳模管理', '社区管理数据库']
          },
          yAxis: {
            name: '销售额',
            data: 'value'
          },
          series: [
            {
              name: 'Oracle',
              data: [120, 78, 70, 74, 50],
              type: 'line',
              stack: 'a',
              fill: {
                show: true
              }
            },
            {
              name: 'MySql',
              data: [85, 62, 75, 63, 76],
              type: 'line',
              stack: 'a',
              smooth: true,
              color:'#12561b'
            },

          ],
          grid: {
            left: '3%',
            right: '3%',
            top:'8%',
            //bottom: '10%',
            containLabel: true
          },
        },
          this.option3={

            xAxis: {
              // name: '第一周',
              data: 'value',
                min: 0,
            },
            yAxis: {
              // name: '销售额',
              data: [  'Oracle', 'MySql']
            },
            series: [
              {
                data: [ 20, 20],
                type: 'bar',
                animationCurve: 'easeOutBack'
              }
            ],
            grid: {
              left: '3%',
              right: '3%',
              top:'8%',
              //bottom: '10%',
              containLabel: true
            },
          }

      },






    }
  }
</script>

<style scoped>

  /*最外层透明*/
  .regional_table /deep/ .el-table,
  .regional_table /deep/ .el-table__expanded-cell {
    background-color: transparent;
    color: white;
  }
  /* 表格内背景颜色 */
  .regional_table /deep/ .el-table th,
  .regional_table /deep/ .el-table tr,
  .regional_table /deep/ .el-table td {
    background-color: transparent !important;
    color: white;
  }
  .showin{
    width: 270px;
    height: 260px;
    margin-right: 50px;
    margin-left: 20px;
  }

</style>
